// Object.definedProperty proxy
const data = { text: "default" };
const input = document.getElementById("input");
const span = document.getElementById("span");

Object.defineProperty(data, "text", {
    set(newVal) {
        input.value = newVal;
        span.innerHTML = newVal;
    }
})

input.addEventListener("keyup", function (e) {
    data.text = e.target.value
})

// proxy
const input = document.getElementById("input");
const span = document.getElementById("span");
const data = { text: "default" };

const handler = {
    set(target, key, value) {
        target[key] = value;
        // input.value = value;
        // span.innerHTML = value;
        console.log(".....",value)
        return value
    }
}
const proxy = new Proxy(data, handler);
input.addEventListener("keyup",function(e){
    proxy.text = e.target.value
})